<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('财务上传情况') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名字')">
        <el-input v-model="queryParams.dealName" placeholder="项目名称" clearable />
      </el-form-item>
      <el-form-item :label="$t('基金')">
        <el-select v-model="fundIdList" filterable multiple collapse-tags :placeholder="$t('基金')">
          <el-option
            v-for="dict in fundBaseListOption"
            :key="dict.id"
            :label="$t(dict.fundName)"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('年份')" prop="year">
        <DatePicker v-model="queryParams.year" type="year" value-format="yyyy" :placeholder="$t('年份')" :clearable="false" />
      </el-form-item>
      <el-form-item :label="$t('报告周期')" prop="type">
        <el-select v-model="queryParams.type" value="" :placeholder="$t('报告周期')" clearable>
          <el-option v-for="dict in cacheTypeOptions" :key="dict.dictValue" :label="$t(dict.dictLabel)" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" tooltip-effect="darkTable" :data="dataList">
      <!-- <el-table-column :label="$t('序号')" type="index" align="center" width="50" /> -->
      <el-table-column :label="$t('项目名称')" align="center" prop="year" width="220" show-overflow-tooltip>
        <template slot-scope="scope">
          <router-link target="_blank" :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}" class="link_a">{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <template v-for="(month, i) in typeOptions">
        <el-table-column :key="`month_${i}`" :label="month.dictLabel" align="center">
          <template v-for="(item, index) in dataSourceOptions">
            <el-table-column :key="index" :label="$t(item.dictLabel)" align="center" prop="year" min-width="100">
              <template slot-scope="scope">
                <template v-if="scope.row[item.dictValue+month.dictValue]!=null">
                  <span class="details" @click="updateHandle(scope.row[item.dictValue+month.dictValue])">{{ scope.row[item.dictValue+month.dictValue]['uploadLabel'] }}</span>
                </template>
                <template v-else>
                  <span style="cursor: pointer;" @click="skipHandle(scope.row,month.dictValue,item.dictValue)"><i class="el-icon-plus" /></span>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <el-dialog :title="$t('财务数据上传')" :visible.sync="formOpen" width="550px" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <pcwDataMainUpload ref="pcwDataMainUpload" :company-id="companyId" @refresh="refresh" />
    </el-dialog>
    <el-dialog :visible.sync="handOpen" :close-on-click-modal="false" :lock-scroll="false" append-to-body :show-close="false" top="50px" width="70%">
      <div v-loading="handUploadLoading">
        <handUpload ref="handUpload" :company-id="companyId" :is-add="false" :upload-data="uploadData" @save="tipSave" />
      </div>
    </el-dialog>
    <el-dialog :visible.sync="tabOpen" fullscreen :close-on-click-modal="false" :lock-scroll="false" append-to-body :show-close="false" custom-class="previewDialog">
      <pcw-data-main-tab ref="pcwDataMainTab" :upload-data="tabResponseData" disabled :company-id="companyId" @cancel="tabOpen = false" @save="tabOpen = false" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getUploadSituationReport
} from '@/api/company/pcw/pcwDataMain'
import { findFundFof } from '@/api/fund/fundBase'
import {
  getUploadData,
  getPcwDataMainDataByHand,
  updataUploadByHand
} from '@/api/company/pcw/pcwDataMain'
import pcwDataMainUpload from './pcwDataMainUpload.vue'
import pcwDataMainTab from '@/views/company/pcw/pcwDataMainTab'
import handUpload from './handUpload.vue'
export default {
  components: {
    pcwDataMainUpload,
    pcwDataMainTab,
    handUpload
  },
  data() {
    return {
      loading: false,
      dataList: [],
      queryParams: {
        dealName: undefined,
        year: new Date().getFullYear() + '',
        type: undefined,
        ids: '',
        pageSize: 20,
        pageNum: 1
      },
      // 报告类型
      typeOptions: [],
      cacheTypeOptions: [],
      formOpen: false,
      companyId: undefined,
      total: 0,
      dataSourceOptions: [],
      handUploadLoading: false,
      tabOpen: false,
      tabResponseData: {},
      uploadData: {},
      rowMainId: undefined,
      handOpen: false,
      fundBaseListOption: [],
      fundIdList: []
    }
  },
  created() {
    // 财务数据报告周期
    this.getDicts('financial_type').then(response => {
      this.typeOptions = response.data
      this.cacheTypeOptions = response.data
    })
    this.getDicts('pcw_data_source').then(response => {
      this.dataSourceOptions = response.data
    })
    findFundFof({ scope: true }).then(response => {
      this.fundBaseListOption = response.data
    })
    this.getList()
  },
  methods: {
    /** 查询上传财务数据主表列表 */
    getList() {
      this.loading = true
      this.queryParams.ids = this.fundIdList.toString()
      getUploadSituationReport(this.queryParams).then(response => {
        this.dataList = response.data
        this.total = response.datas.total
        this.loading = false
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        companyId: undefined,
        year: undefined,
        type: undefined
      }
      this.typeOptions = this.cacheTypeOptions
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.changeType(this.queryParams.type)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams = {
        dealName: undefined,
        year: new Date().getFullYear() + '',
        type: undefined,

        ids: '',
        pageSize: 20,
        pageNum: 1
      }
      this.fundIdList = []
      this.queryHandle()
    },
    // @/views/company/pcw/pcwDataMainUpload?quick=true
    skipHandle(row, type, dataSource) {
      this.formOpen = true
      this.companyId = row.companyId
      const data = {
        year: this.queryParams.year,
        type: type + '',
        dataSource: dataSource
      }
      this.$nextTick(() => {
        this.$refs.pcwDataMainUpload.initialAssignment(data)
      })
    },
    refresh() {
      this.formOpen = false
      this.getList()
    },
    updateHandle(row) {
      this.companyId = row.companyId
      if (row.uploadType === 'hand' || row.uploadType === 'market') {
        this.handOpen = true
        this.rowMainId = undefined
        this.handUploadLoading = true
        getPcwDataMainDataByHand(row.id).then(response => {
          this.rowMainId = row.id
          this.uploadData = response.data
          this.handUploadLoading = false
          this.$nextTick(() => {
            this.$refs.handUpload.initData()
          })
        }).catch(() => {
          this.handUploadLoading = false
        })
      } else {
        const loading = this.$loading()
        getUploadData(row.id).then(response => {
          this.tabResponseData = response.data
          this.tabOpen = true
          loading.close()
          this.$nextTick(() => {
            this.$refs.pcwDataMainTab.init()
            this.$refs.pcwDataMainTab.view = false
          })
        }).catch(() => {
          loading.close()
        })
      }
    },
    tipSave(data) {
          this.handUploadLoading = true
          var submit = {}
          submit.sheetData = data
          submit.mainId = this.rowMainId
          updataUploadByHand(submit).then(response => {
              this.handUploadLoading = false
              console.log('保存----')
              if (response.code === 200) {
                this.handOpen = false
                this.msgSuccess(this.$t('保存成功'))
                this.$nextTick(() => {
                  this.$emit('refresh')
                })
              } else {
                this.msgError(response.msg)
              }
          }).catch(() => {
            this.handUploadLoading = false
          })
    },
    changeType(val) {
      if (val) {
        this.typeOptions = this.cacheTypeOptions
        const foundOption = this.typeOptions.find(option => option.dictValue === val)
        if (foundOption) {
          this.typeOptions = []
          this.typeOptions.push(foundOption)
        }
      } else {
        this.typeOptions = this.cacheTypeOptions
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.details{
  cursor: pointer;
  color: #409EFF;
}
/deep/.previewDialog {
    top: 0px !important;
    width: 100%;
    margin-top: unset !important;
    padding: 30px;
    padding-top: 15px;
}
</style>
